<template>
    <!-- 
        mySwiper（表示Swiper返回的实例）.autoplay.stop()      停止自动播放
        mySwiper.autoplay.start()     开启自动播放 -->
    <div class="swiper" 
        ref="banner" 
        @mouseenter="mySwiper.autoplay.stop()" 
        @mouseleave="mySwiper.autoplay.start()"
    >
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-no-swiping" 
                v-for="li in list" 
                :key="li.id">
                    <a href.prevent="">
                        <img :src="li.imgUrl" alt="" :width="width">
                    </a>
            </div>
        </div>
        <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
                                
        <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
    </div>
</template>

<script>

// 引入swiper轮播图插件
import Swiper from 'swiper'
import {throttle} from 'lodash'

export default {
    name:'carousel',

    // 接收父元素传来的list数据
    props:['list','width'],   

    // 监视接收的list的数据变化   
    //     immediate:true  表示进入就执行该语句   false 表示list发生了变化才执行该语句
    //     deep：true    表示深度监测
    watch:{
        list:{
            immediate:true,
            handler(){
                this.$nextTick(()=>{
                    //在vc上（this）定义一个mySwiper变量 等于  Swiper返回值
                      this.mySwiper = new Swiper (this.$refs.banner, {
                          noSwiping : true,
                            autoplay: {     //自动循环播放轮播图
                                delay: 3000,
                                stopOnLastSlide: false,
                                disableOnInteraction: true,
                            },

                            direction: 'horizontal', // 垂直切换选项
                            loop: true, // 循环模式选项
                            
                            // 如果需要分页器
                            pagination: {
                                el: '.swiper-pagination',
                                clickable :true,   //打开轮播图下面的点
                            },
                            // 如果需要前进后退按钮
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                            },
                        })  
                })
            }
        }
    },
}
</script>

<style scoped lang='less'>
    .swiper{
        overflow: hidden;
        position: relative;
    }
</style>